<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <script>
    const toys = [
      { id: 1, color: "红色", name: "赛车", types: ["户外", "运动"] },
      { id: 2, color: "绿色", name: "积木", types: ["益智", "室内"] },
      { id: 3, color: "绿色", name: "碗", types: ["室内", "器皿"] },
      { id: 4, color: "红色", name: "拼图", types: ["益智", "室内"] },
      { id: 5, color: "蓝色", name: "UNO纸牌", types: ["桌游", "益智", "室内"], },
      { id: 6, color: "白色", name: "球", types: ["户外", "运动"] },
      { id: 7, color: "绿色", name: "气球", types: ["室内"] },
      { id: 8, color: "蓝色", name: "棋子", types: ["益智", "室内", "桌游"] },
      { id: 9, color: "红色", name: "水枪", types: ["户外"] },
      { id: 10, color: "红色", name: "橡皮泥", types: ["益智", "室内"] },
      { id: 11, color: "白色", name: "玻璃球", types: ["游戏"] },
      { id: 12, color: "紫色", name: "球拍", types: ["运动", "户外"] },
      { id: 13, color: "黑色", name: "弹弓", types: ["户外"] },
      { id: 14, color: "黄色", name: "布偶", types: ["家居", "室内"] },
      { id: 15, color: "蓝色", name: "跳绳", types: ["运动", "户外"] },
      { id: 16, color: "绿色", name: "垫子", types: ["家居", "运动", "室内"], },
    ];
    // 按如下模版打印所有物品
    console.log(
      toys.map(function (v) {
        return `<li>${v.color}：<a href='item?id=${v.id}'>${v.name}，类型：<span>${v.types}</span></li>`;
      })
    );
    const ho = toys.filter(function (v) {
      return v.color === "红色";
    });

    const green = toys.filter(function (v) {
      return (
        v.color === "绿色" &&
        v.types.filter(function (it) {
          return it.types === "室内";
        })
      );
    });

    /*
  <ul>
    <li>白色：<a href='item?id=1'>赛车，类型：<span>户外</span>, <span>运动</span></li>
    ...
  </ul>
  */

    // 找出所有红色物品的名字数组
    // 找出所有绿色并且types包含室内的物品
    // 一共有哪些种颜色？

    const colors = []
    for (let i = 0; i < toys.length; i++) {
      if (colors.indexOf(toys[i].color) === -1)
      }
      // 一共有哪些种类型？
      // 整理数据后按下面的格式显示
    /*
    <ul>
      <li>
        户外
        <ul>
          <li>红色的赛车</li>
          <li>白色的球</li> 
          <li>...</li>
        </ul>
      </li>
      <ul>
      <li>
        运动
        <ul>
          <li>红色的赛车</li>
          <li>白色的球</li>
          <li>紫色的球拍</li>
        </ul>
      </li>
      ...
    </ul>
  */
  </script>
</body>

</html>